<template>
    <div class='duty'>
        <el-calendar v-model="month">
            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
            <template
                slot="dateCell"
                slot-scope="{date, data}">
                <div @click="openDuty(data.day)">
                    <p class='days'>
                    {{ data.day.split('-').slice(2).join('-') }} 
                    </p>

                    <div class="noset" v-if="!datas[data.day]">未设置</div>
                    <div class="sets" v-if="datas[data.day]">{{datas[data.day]}}</div>
                </div>
            </template>
        </el-calendar>

        <el-dialog
            title="值班设置"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <div style='height:500px;overflow:auto' v-if="dialogVisible">
                <el-tree
                    :data="treeData"
                    show-checkbox
                    node-key="id"
                    ref="tree"
                    default-expand-all
                    :props="defaultProps">
                </el-tree>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveData">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data(){
        return{
            dialogVisible:false,
            month:"",
            curDate:"",
            months:"",
            section:"",
            datas:{
               
            },
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            treeData:[]
        }
    },
    created(){
        let myDate=new Date();
        let year=myDate.getFullYear();    //获取完整的年份(4位,1970-????)
        let month=myDate.getMonth()+1;       //获取当前月份(0-11,0代表
        let day=myDate.getDate();        //获取当前日(1-31)
        month=month<10 ? "0"+month:month;
        day=day<10 ? "0"+day:day;
        this.months= year+"-"+month+"-"+day
        this.curDate= year+"-"+month+"-"+day
        //this.months=this.curDate;
        this.loadData();
    },
    methods:{
        openDuty(day){
            if(day<this.curDate){
                this.$message.error('只能修改当天和只有的值班');
                return;
            }
            this.days=day;
            this.$post("bygex","/duty/getDutyUser",{days:day}).then(data=>{
                this.dialogVisible=true;
                this.treeData=data.data;
                this.section=data.section;
                let checkUser=data.checkUser;
                if(checkUser){
                    window.setTimeout(()=>{
                        this.$refs.tree.setCheckedKeys(checkUser.split(","));
                    },500)
                }
               
            })
            
            
        },
        loadData(){
            this.$post("bygex","/duty/getDayDuty",{month:this.months}).then(data=>{
                this.datas=data;
            })
        },
        saveData(){
            let checks=this.$refs.tree.getCheckedKeys().join(",");
            checks=checks.replace(this.section+",","")
          
            this.$post("bygex","/duty/saveDutyUser",{days:this.days,users:checks}).then(data=>{
                this.$message({
                    message: data[0].msg,
                    type: 'success'
                });
                this.loadData();
            })
        }
    },
    watch:{
        month(val){
           
            let year=val.getFullYear();    //获取完整的年份(4位,1970-????)
            let month=val.getMonth()+1;       //获取当前月份(0-11,0代表
            let day=val.getDate();        //获取当前日(1-31)
            month=month<10 ? "0"+month:month;
            day=day<10 ? "0"+day:day;
            this.months= year+"-"+month+"-"+day
            this.loadData();
        }
    }
}
</script>
<style scoped>
    .days{
        font-weight:bold;
        font-size:18px;
    }
    .noset{
        margin-top:10px;
        width:100%;
        text-align:center;
        color:red;
        font-size:16px;
    }
    .sets{
        margin-top:10px;
        color:green;
    }
</style>